<template>
  <div id="app">
    <div class="container">
      <div class="data-scroll" :style="{ transform: `translate3d(0px, ${ -scrollTop }px, 0px)` }">
        <div
          class="data-item"
          ref="dataItem"
          v-for="(item, index) of dataOrigin"
          :key="index"
        >{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      dataOrigin: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      dataItemHeight: 0,
      scrollTop: 0
    };
  },
  mounted() {
    this.dataItemHeight = this.$refs.dataItem[0].offsetHeight;
    this.setLastItem();
    this.setAutoScroll();
  },
  methods: {
    setAutoScroll() {
      setInterval(() => {
        this.scrollTop++;
        if (this.scrollTop % this.dataItemHeight === 0) {
          this.scrollTop = 0;
          this.removeFirstItem();
          this.setLastItem();
        }
      }, 50);
    },
    setLastItem() {
      this.dataOrigin.push(this.dataOrigin[0]);
    },
    removeFirstItem() {
      this.dataOrigin = this.dataOrigin.filter((item, index) => index !== 0);
      console.log('this.dataOrigin',this.dataOrigin)
    }
  }
};
</script>

<style>
body {
  margin: 0;
  overflow: hidden;
}

.container {
  overflow: hidden;
}

.data-item {
  height: 80px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  line-height: 80px;
  font-size: 30px;
}
</style>
